<template>
    <!-- 物资管理-供货明细分析 -->
    <div class="main_content">
        <div class="scorll">
            <div class="content">
                <div class="search">
                    <div class="list">
                        <span>选择日期:</span>
                        <DatePicker type="date" placeholder="请选择开始时间" style="width: 200px" v-model="startTime" :options="options" :clearable="false"></DatePicker>
                        <DatePicker type="date" placeholder="请选择结束时间" style="width: 200px;margin-left:20px;" v-model="endTime" :options="options" :clearable="false"></DatePicker>
                    </div>
                    <div class="list">
                        <span>单据来源:</span>
                        <CheckboxGroup v-model="sourceType">
                            <Checkbox v-for="(val,index) in sourceList" :key="index" :label="val.id">
                                <span>{{val.name}}</span>
                            </Checkbox>
                        </CheckboxGroup>
                    </div>
                    <div class="list list1">
                        <div class="item1">
                            <span>材料类别:</span>
                            <Select v-model="matTypeName" filterable style="width:200px" placeholder="请选择材料类别名称" @on-change="getmatList">
                                <Option v-for="item in matAllTypeList" :value="item.id" :key="item.id">{{item.name}}</Option>
                            </Select>
                            <input type="password" autocomplete="new-password" style="display: none" />
                        </div>
                        <div class="item1">
                            <span>材料明细:</span>
                            <Select v-model="matName" filterable style="width:200px" placeholder="请选择材料明细名称">
                                <Option v-for="item in matList" :value="item.id" :key="item.id" style="width:180px">{{item.name}}{{item.spec}}{{item.model}}</Option>
                            </Select>
                            <input type="password" autocomplete="new-password" style="display: none" />
                        </div>
                        <div class="item1">
                            <span>发料单位:</span>
                            <Select v-model="receiveSupplierName" filterable style="width:200px" placeholder="请选择收料单位名称">
                                <Option v-for="item in corpList" :value="item.id" :key="item.id">{{item.name}}</Option>
                            </Select>
                            <input type="password" autocomplete="new-password" style="display: none" />
                        </div>
                        <input type="text" class="intBox" style="display:none" />
                        <div class="item1">
                            <el-button type="primary" @click="searchAll" size="small" plain>搜索</el-button>
                            <el-button type="info" @click="clear" style="margin-left:20px;" size="small" plain>重置</el-button>
                        </div>
                    </div>
                </div>
                <div class="msg_data">
                    <div class="item">
                        <div>
                            <p>
                                <span>运单重量(吨):</span>
                                <span>{{ deliveryWeight }}</span>
                            </p>
                            <p>
                                <span>实际重量(吨):</span>
                                <span>{{ actualWeight }}</span>
                            </p>
                            <p>
                                <span>确认重量(吨):</span>
                                <span>{{ confirmWeight }}</span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="table">
                    <el-table :data="list" style="width: 100%" @expand-change="expandChange" :row-key="getRowKeys" :expand-row-keys="expands">
                        <el-table-column type="expand">
                            <template slot-scope="porps">
                                <el-table :data="porps.row.weighNoteList" style="margin-left:40px">
                                    <el-table-column type="expand">
                                        <template slot-scope="porps">
                                            <ul class="mterialInfo">
                                                <li v-for="item in porps.row.weighNoteMatList" :key="item.id">
                                                    <div>材料名称：{{ item.matName }}</div>
                                                    <div>规格型号：{{ item.spec }}{{ item.model }}</div>
                                                    <div>实际数量：{{ item.actualAmount}}{{ item.deliveryUnitName }}</div>
                                                    <div>运单数量：{{ item.deliveryAmount}}{{ item.deliveryUnitName }}</div>
                                                    <div>实际重量：{{ item.actualWeight }}吨</div>
                                                    <div>运单重量：{{ item.deliveryWeight }}吨</div>
                                                    <!-- <img src="./../../assets/images/fmam/receive/diff1.png" v-if="item.diffResult == -1" /> -->
                                                </li>
                                            </ul>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="date" label="收料时间"></el-table-column>
                                    <el-table-column prop="code" label="磅单编号"></el-table-column>
                                    <el-table-column label="收料类型">
                                        <template slot-scope="scope">
                                            <span v-if="scope.row.recvSendType == 101">采购</span>
                                            <span v-if="scope.row.recvSendType == 102">调入</span>
                                            <span v-if="scope.row.recvSendType == 103">甲供</span>
                                            <span v-if="scope.row.recvSendType == 301">直入直出</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="sendSupplierName" label="发料单位名称"></el-table-column>
                                    <el-table-column label="操作">
                                        <template slot-scope="scope">
                                            <el-button @click="getDtails(scope.row)" type="text" size="small">查看详情</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </template>
                        </el-table-column>
                        <el-table-column prop="sendSupplierName" label="发料单位"></el-table-column>
                        <el-table-column prop="deliveryWeight" label="运单重量"></el-table-column>
                        <el-table-column prop="actualWeight" label="实际重量"></el-table-column>
                        <el-table-column prop="confirmWeight" label="确认重量"></el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
        <Modal v-model="detailsModal" width="1000px;" :mask-closable="false" :footer-hide="true">
            <div class="title">
                <div class="item" v-if="detailsObj.source != 2">
                    <span>偏差结果:</span>
                    <span v-if="detailsObj.diffResult ==0">正常</span>
                    <span v-if="detailsObj.diffResult ==1">超正差</span>
                    <span v-if="detailsObj.diffResult ==-1">超负差</span>
                </div>
                <div class="item">
                    <span v-if="detailsObj.source == 2">单据编号:</span>
                    <span v-else>磅单编号:</span>
                    <span>{{detailsObj.code}}</span>
                </div>
                <div class="item">
                    <span>组织机构:</span>
                    <span>{{detailsObj.deptName}}</span>
                </div>
            </div>
            <hr />
            <div class="val">
                <h2>
                    <span v-if="detailsObj.source == 2">基本信息</span>
                    <span v-else>过磅信息</span>
                </h2>
                <div class="tip">
                    <div class="item" v-if="detailsObj.source == 2">
                        <span>收料人:</span>
                        <span>{{detailsObj.checkUserName}}</span>
                    </div>
                    <div class="item" v-if="detailsObj.source == 2">
                        <span>收料时间:</span>
                        <span>{{detailsObj.checkTime}}</span>
                    </div>
                    <div class="item" v-if="detailsObj.source != 2">
                        <span>称毛时间:</span>
                        <span>{{detailsObj.grossWeightTime}}</span>
                    </div>
                    <div class="item" v-if="detailsObj.source != 2">
                        <span>称皮时间:</span>
                        <span>{{detailsObj.tareWeightTime}}</span>
                    </div>
                    <div class="item">
                        <span>单据来源:</span>
                        <span v-if="detailsObj.source == 0">称重</span>
                        <span v-if="detailsObj.source == 1">补录</span>
                        <span v-if="detailsObj.source == 2">移动验收</span>
                    </div>
                </div>
                <div class="tip" v-if="detailsObj.source != 2">
                    <div class="item" v-if="detailsObj.source != 2">
                        <span>进场称重人员:</span>
                        <span>{{detailsObj.grossUserName}}</span>
                    </div>
                    <div class="item" v-if="detailsObj.source != 2">
                        <span>出场称重人员:</span>
                        <span>{{detailsObj.tareUserName}}</span>
                    </div>
                    <div class="item" v-if="detailsObj.source != 2">
                        <span>打印次数:</span>
                        <span>{{detailsObj.printCnt}}</span>
                    </div>
                </div>
                <div class="tip">
                    <div class="item" >
                        <span>备注:</span>
                        <span>{{detailsObj.remark}}</span>
                    </div>
                </div>
            </div>
            <hr />
            <div class="val1">
                <h2>
                    <span v-if="detailsObj.source == 2">单据信息</span>
                    <span v-else>磅单信息</span>
                </h2>
                <div class="tip">
                    <p>磅单信息</p>
                    <div class="msg">
                        <div class="item">
                            <span>收料类型:</span>
                            <span v-if="detailsObj.recvSendType == 101">采购</span>
                            <span v-if="detailsObj.recvSendType == 102">调入</span>
                            <span v-if="detailsObj.recvSendType == 103">甲供</span>
                            <span v-if="detailsObj.recvSendType == 301">直入直出</span>
                        </div>
                        <div class="item" v-if="detailsObj.recvSendType == 301">
                            <span>发料单位:</span>
                            <span>{{detailsObj.sendSupplierName}}</span>
                        </div>
                        <div class="item">
                            <span>收料单位:</span>
                            <span>{{detailsObj.receiveSupplierName}}</span>
                        </div>
                        <div class="item">
                            <span>车牌号:</span>
                            <span>{{detailsObj.licensePlate}}</span>
                        </div>
                        <div class="item">
                            <span>库房:</span>
                            <span>{{detailsObj.warehouseName}}</span>
                        </div>
                        <div class="item">
                            <span>使用部位:</span>
                            <span>{{detailsObj.partName}}</span>
                        </div>
                    </div>
                    <hr />
                    <p>运单图片</p>
                    <div class="msg">
                        <div class="item">
                            <span>原始单据编号:</span>
                            <span>{{detailsObj.deliveryCode}}</span>
                        </div>
                    </div>
                    <ul>
                        <li v-for="(val,i) in imgList" :key="i">
                            <div class="demo-image__preview">
                                <el-image :src="val" :preview-src-list="[val]"></el-image>
                            </div>
                        </li>
                    </ul>
                    <hr />
                    <p>材料明细</p>
                    <div class="table">
                        <table class="create-table" style="margin-top:20px;">
                            <thead>
                                <tr>
                                    <th>材料</th>
                                    <th v-if="detailsObj.source == 2">批次编号</th>
                                    <th v-if="detailsObj.recvSendType == 301 && detailsObj.source == 2">运单数量</th>
                                    <th v-if="detailsObj.recvSendType == 301 && detailsObj.source == 2">实际数量</th>
                                    <th v-if="detailsObj.source == 2">确认数量</th>
                                    <th v-if="detailsObj.source != 2">数量</th>
                                    <th v-if="detailsObj.source != 2">重量（吨）</th>
                                    <th v-if="detailsObj.source != 2">扣量（吨）</th>
                                    <th v-if="detailsObj.source != 2">偏差</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item,index) in noteMatList" :key="index">
                                    <td>
                                        <div>{{item.matName}}</div>
                                        <div>
                                            <span>规格型号:</span>
                                            <span>{{item.spec}}{{item.model}}</span>
                                        </div>
                                        <div>
                                            <span>材料编码:</span>
                                            <span>{{item.matCode}}</span>
                                        </div>
                                    </td>
                                    <td v-if="detailsObj.source == 2">{{item.batchCode}}</td>
                                    <td v-if="detailsObj.recvSendType == 301 && detailsObj.source == 2">{{item.deliveryAmount}}{{item.deliveryUnitName}}</td>
                                    <td v-if="detailsObj.recvSendType == 301 && detailsObj.source == 2">{{item.actualAmount}}{{item.deliveryUnitName}}</td>
                                    <td v-if="detailsObj.source == 2">{{item.confirmAmount}}{{item.deliveryUnitName}}</td>
                                    <td v-if="detailsObj.source != 2">
                                        <div>{{item.actualAmount}}{{item.deliveryUnitName}}</div>
                                        <div>
                                            <span>运单:</span>
                                            <span>{{item.deliveryAmount}}{{item.deliveryUnitName}}</span>
                                        </div>
                                    </td>
                                    <td v-if="detailsObj.source != 2">
                                        <div>{{item.actualWeight}}吨</div>
                                        <div>
                                            <span>运单:</span>
                                            <span>{{item.deliveryWeight}}吨</span>
                                        </div>
                                    </td>
                                    <td v-if="detailsObj.source != 2">{{item.deductAmount}}</td>
                                    <td v-if="detailsObj.source != 2">
                                        <div>
                                            <span v-if="item.diffType == 1">{{item.actualDiff}}</span>
                                            <span v-if="item.diffType == 2">{{item.actualDiff}}%</span>
                                        </div>
                                        <div>
                                            <span v-if="item.diffType == 1">正负差标准:</span>
                                            <span v-if="item.diffType == 2">比例偏差:</span>
                                            <span v-if="item.diffType == 1">{{item.plusDiff}},</span>
                                            <span v-if="item.diffType == 1">{{item.minusDiff}}</span>
                                            <span v-if="item.diffType == 2">{{item.plusDiff}}%,</span>
                                            <span v-if="item.diffType == 2">{{item.minusDiff}}%</span>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="msg" v-if="detailsObj.source != 2">
                        <div class="item">
                            <span>毛重:</span>
                            <span>{{detailsObj.grossWeight}}吨</span>
                        </div>
                        <div class="item">
                            <span>皮重:</span>
                            <span>{{detailsObj.tareWeight}}吨</span>
                        </div>
                        <div class="item">
                            <span>净重:</span>
                            <span>{{detailsObj.netWeight}}吨</span>
                        </div>
                    </div>
                    <hr />
                    <div class="msg" v-if="detailsObj.source != 2">
                        <div class="item">
                            <span>实际总重量:</span>
                            <span>{{detailsObj.actualWeight}}吨</span>
                        </div>
                    </div>
                    <div class="msg" v-if="detailsObj.source != 2">
                        <div class="item">
                            <span>运单总重量:</span>
                            <span>{{detailsObj.deliveryWeight}}吨</span>
                        </div>
                    </div>
                    <div class="msg" v-if="detailsObj.source != 2">
                        <div class="item">
                            <span>确认重量:</span>
                            <span>{{confirmWeight}}吨</span>
                        </div>
                    </div>
                    <div class="msg" v-if="detailsObj.source != 2">
                        <div class="item">
                            <span>确认类型:</span>
                            <span v-if="detailsObj.confirmWeightType == 0">运单量</span>
                            <span v-if="detailsObj.confirmWeightType == 1">实际量</span>
                            <span v-if="detailsObj.confirmWeightType == 2">最小量</span>
                            <span v-if="detailsObj.confirmWeightType == 3">输入量</span>
                        </div>
                    </div>
                </div>
            </div>
            <hr />
            <div class="val1">
                <h2>
                    <span v-if="detailsObj.source == 2">图片信息</span>
                    <span v-else>进出场图片</span>
                </h2>
                <div class="tip" v-show="enterImgList.length>0">
                    <p>进场图片</p>
                    <ul>
                        <li v-for="(val,i) in enterImgList" :key="i">
                            <div class="demo-image__preview">
                                <el-image :src="val" :preview-src-list="[val]"></el-image>
                            </div>
                        </li>
                    </ul>
                </div>
                <hr v-show="enterImgList.length>0" />
                <div class="tip" v-show="outImgList.length>0">
                    <p>出场图片</p>
                    <ul>
                        <li v-for="(val,i) in outImgList" :key="i">
                            <div class="demo-image__preview">
                                <el-image :src="val" :preview-src-list="[val]"></el-image>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="tip" v-show="MImgList.length>0">
                    <p>收料图片</p>
                    <ul>
                        <li v-for="(val,i) in MImgList" :key="i">
                            <div class="demo-image__preview">
                                <el-image :src="val" :preview-src-list="[val]"></el-image>
                            </div>
                        </li>
                    </ul>
                </div>
                <hr v-show="MImgList.length>0" />
                <div class="tip" v-show="DImgList.length>0">
                    <p>签名图片</p>
                    <ul>
                        <li v-for="(val,i) in DImgList" :key="i">
                            <div class="demo-image__preview">
                                <el-image :src="val" :preview-src-list="[val]"></el-image>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="val1" v-show="detailsObj.source == 2">
                <h2>收料地点</h2>
                <div id="container55" class="container" style="height:500px;margin-top:10px"></div>
            </div>
        </Modal>
    </div>
</template>

<script>
import { format } from "@/sever/utils.js";
import {
    getAnalysisList,
    getWeighNoteDetail,
    getAllSupplierList,
    getMatTypeOptionlist,
    getAllMatList,
} from "@/api/api.js";
export default {
    data() {
        return {
            options: {
                disabledDate(date) {
                    return date > Date.now();
                },
            },
            previewList: [],
            deptId: "",
            endTime: new Date(),
            startTime: new Date(new Date().valueOf() - 604800000),
            matTypeName: "",
            matName: "",
            receiveSupplierName: "",
            list: [],
            detailsModal: false,
            detailsObj: {},
            enterImgList: [],
            outImgList: [],
            imgList: [],
            MImgList: [],
            DImgList: [],
            noteMatList: [],
            confirmWeight: "",
            deliveryAmount: "",
            actualAmount: "",
            deliveryWeight: "",
            actualWeight: "",
            sub: -1,
            flag: true,
            expands: [],
            getRowKeys(row) {
                return row.sendSupplierId;
            },
            sourceList: [
                {
                    id: 0,
                    name: "称重",
                },
                {
                    id: 1,
                    name: "补录",
                },
                {
                    id: 2,
                    name: "移动收料",
                },
            ],
            sourceType: [0, 1, 2],
            corpList: [],
            matAllTypeList: [],
            matList: [],
            matId: "",
        };
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        },
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.endTime = new Date();
                this.startTime = new Date(new Date().valueOf() - 604800000);
                this.sourceType = [0, 1, 2];
                this.matTypeName = "";
                this.matName = "";
                this.receiveSupplierName = "";
                this.getAllList();
                this.getCorpList();
                this.getMatTypeList();
                this.getMatDetailsList();
            }
        },
    },
    methods: {
        setPreview(src) {
            this.previewList = [];
            this.previewList.push(src);
        },
        //获取供应商单位
        getCorpList() {
            let params = {
                deptId: this.deptId,
                category: 2,
            };
            getAllSupplierList(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.corpList = res.data.list;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //查询材料类别列表
        getMatTypeList() {
            let params = {
                deptId: this.deptId,
            };
            getMatTypeOptionlist(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.matAllTypeList = res.data.list;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        getMatDetailsList() {
            let params = {
                deptId: this.deptId,
                matTypeId: this.matId,
            };
            getAllMatList(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.matList = res.data.list;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //获取材料类别
        getmatList(index) {
            this.matName = "";
            this.matId = index;
            this.getMatDetailsList();
        },
        getAllList() {
            let params = {
                type: 1,
                deptId: this.deptId,
                startTime: format(this.startTime, "YYYY-MM-DD"),
                endTime: format(this.endTime, "YYYY-MM-DD"),
                matTypeId: this.matTypeName,
                sourceList: this.sourceType,
                matId: this.matName,
                sendSupplierId: this.receiveSupplierName,
            };
            getAnalysisList(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.list = res.data.sendSupplierlist;
                        this.deliveryAmount = res.data.deliveryAmount;
                        this.actualAmount = res.data.actualAmount;
                        this.confirmWeight = res.data.confirmWeight;
                        this.deliveryWeight = res.data.deliveryWeight;
                        this.actualWeight = res.data.actualWeight;
                        for (let i in this.list) {
                            for (let j in this.list[i].weighNoteList) {
                                let arr = [];
                                for (let k in this.list[i].weighNoteList[j]
                                    .weighNoteMatList) {
                                    arr.push(
                                        this.list[i].weighNoteList[j]
                                            .weighNoteMatList[k].diffResult
                                    );
                                }
                                this.list[i].weighNoteList[j][
                                    "diffResultList"
                                ] = arr;
                            }
                        }
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        searchAll() {
            if (
                new Date(this.startTime).getTime() >
                new Date(this.endTime).getTime()
            ) {
                this.$Modal.warning({
                    title: "错误",
                    content: "结束日期不能小于开始日期",
                });
                return;
            }
            this.getAllList();
        },
        getDtails(item) {
            this.confirmWeight = item.confirmWeight;
            this.detailsModal = true;
            this.enterImgList = [];
            this.imgList = [];
            this.outImgList = [];
            this.MImgList = [];
            this.DImgList = [];
            let params = {
                id: item.weighNoteId,
            };
            getWeighNoteDetail(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.detailsObj = res.data;
                        this.noteMatList = res.data.noteMatList;

                        if (this.detailsObj.noteImgList.length > 0) {
                            this.detailsObj.noteImgList.forEach((i) => {
                                if (i.type == 1) {
                                    //进场图片
                                    this.enterImgList.push(i.imgUrl);
                                } else if (i.type == 2) {
                                    //出场图片
                                    this.outImgList.push(i.imgUrl);
                                } else if (i.type == 3) {
                                    //运单图片
                                    this.imgList.push(i.imgUrl);
                                } else if (i.type == 4) {
                                    //移动验收
                                    this.MImgList.push(i.imgUrl);
                                } else if (i.type == 5) {
                                    //电子签名
                                    this.DImgList.push(i.imgUrl);
                                }
                            });
                        }
                        if (this.detailsObj.source == 2) {
                            var map = new AMap.Map("container55", {
                                zoom: 14,
                                center: [res.data.lng, res.data.lat],
                            });
                            var marker;
                            marker = new AMap.Marker({
                                map: map,
                                icon:
                                    "https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
                                position: [res.data.lng, res.data.lat],
                                offset: new AMap.Pixel(-20, -40),
                            });
                        }
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        getFlag(type, item, i) {
            this.flag = !type;
            if (this.flag) {
                this.sub = -1;
            } else {
                this.sub = i;
            }
        },
        clear() {
            this.endTime = new Date();
            this.sourceType = [0, 1, 2];
            this.startTime = new Date(new Date().valueOf() - 604800000);
            this.matTypeName = "";
            this.matName = "";
            this.receiveSupplierName = "";
            this.getAllList();
        },
        expandChange(row, expandedRows) {
            this.expands = [];
            if (expandedRows.length > 0) {
                row ? this.expands.push(row.sendSupplierId) : "";
            }
        },
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId;
        this.getAllList();
        this.getCorpList();
        this.getMatTypeList();
        this.getMatDetailsList();
    },
};
</script>

<style scoped lang="less">
@import "./../../assets/style/themeBase.less";
@import "./../../assets/style/base.less";
@import "./../../assets/style/pdf.less";
/deep/.el-image-viewer__wrapper {
    top: 0;
    left: 200px;
    .el-icon-circle-close {
        color: #fff;
    }
    .el-image-viewer__prev,
    .el-image-viewer__next {
        display: none;
    }
}
.mterialInfo{
    padding:20px 50px;
    li{
        display: flex;
        div{
            &:nth-child(3),&:nth-child(4),&:nth-child(5),&:nth-child(6){
              width:12%;  
            }
            &:nth-child(1),&:nth-child(2){
                width:20%;
            }
        }
    }
}
</style>
